import { 
  useState,
  useEffect,
  useLayoutEffect,
  useRef,
  use
} from 'react'

import './App.css'

// function App() {
//   // 响应式对象
//   const boxRef = useRef()
//   // console.log(boxRef)
//   useEffect(() => {
//     console.log(boxRef.current.offsetHeight)
//   }, [])
//   useLayoutEffect(() => {
//     console.log(boxRef.current.offsetHeight) // 先打印
//   }, [])

//   return (
//     <>
//       <div ref={boxRef} style={{height: 100}}></div>
//     </>
//   )
// }

// function App() {
//   const [content, setContent] = useState('xx')
//   const ref = useRef()
//   // useEffect(() => {
//   //   setContent('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111')
//   //   ref.current.style.height = '200px'
//   // }, [])
//   useLayoutEffect(() => {
//     // 阻塞渲染 同步的感觉
//     setContent('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111')
//     ref.current.style.height = '200px'
//   }, [])

//   return (
//       <div ref={ref} style={{height: '50px',background: 'lightblue'}}>{content}</div>
//   )
// }

function Modal() {
  // 弹窗
  const ref = useRef()
  useLayoutEffect(() => {
    const height = ref.current.offsetHeight
    ref.current.style.marginTop = `${(window.innerHeight - height) / 2}px`
    ref.current.style.marginLeft = `${(window.innerWidth - ref.current.offsetWidth) / 2}px`
  }, [])
  return (
    <div ref={ref} style={{background:'red',position:'absolute',width:'200px',height:'200px'}}>
      我是Modal
    </div>
  )
}
function App() {
  return (
    <>
      <Modal />
    </>
  )
}

export default App
